<template>
  <div>
    <a-modal title="打印包裹清单"
             width="720px"
             :visible="dialogVisible"
             :dialog-style="{ top: '30vh' }"
             :destroy-on-close="true"
             :mask-closable="false"
             @cancel="handleCancel"
             ok-text="立即打印"
             cancel-text="取消"
             @close="handleCanOk"
             class="texte-class">
      <template slot="footer"
                class="modal-footer">
        <span><i @click="allStatus(2)">全选</i>/<i @click="allStatus(1)">取消全选</i> </span>
        <a-button key="back"
                  @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit"
                  type="primary"
                  @click="handleCanOk">
          立即打印
        </a-button>
      </template>
      <div class="modal-conetnt">
        <div v-for="(item,index) in List"
             :key="index"
             @click="clickLi(index)"
             :class="{'is-active': item.status === 2}">
          <img src="../../../../assets/image/sellerHub/xuanzhong.png"
               alt=""
               class="xuanzhong"
               v-if="item.status === 2">
          <p>{{item.name}}
            <img src="../../../../assets/image/sellerHub/huowu.png"
                 alt=""
                 v-if="item.status === 1">
            <img src="../../../../assets/image/sellerHub/ydabao.png"
                 alt=""
                 v-if="item.status === 2">
          </p>
          <div>{{item.code}}</div>
        </div>
      </div>
      <div id="print-area" class="print-area">
        <div style="width: 296pt; height: 210.6pt; font-size: 14px; color: #000; font-family: '微软雅黑';"
             v-for="(item, index) in getArr" :key="'getArr' + index">
          <div
              style="height: 17%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px #000 solid;">
            <div style="padding-left: 10px; font-size: 18px;">迅车通</div>
            <div style="padding-right: 5px;">订单编号：{{getArrList.subOrderNO}}</div>
          </div>
          <div style="height: 83%; display: flex; align-items: center;">
            <div style="height: 100%; width: 12%; border-right: 1px solid #000; font-size: 18px;">
              <div
                  style="height: 50%; box-sizing: border-box; border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center;">
                取
              </div>
              <div style="height: 50%; display: flex; align-items: center; justify-content: center;">收</div>
            </div>
            <div
                style="height: 100%; width: 57%; word-break: break-all; border-right: 1px solid #000; box-sizing: border-box;">
              <div
                  style="height: 50%; box-sizing: border-box; border-bottom: 1px solid #000; display: flex; flex-wrap: wrap; align-content: center; padding: 0 5px;">
                <div>商家：{{getArrList.supplierName}}</div>
                <div>地址：{{getArrList.supplierAddress}}</div>
              </div>
              <div
                  style="height: 50%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content: center; padding: 0 5px;">
                <div>客户：{{getArrList.tenantName}}</div>
                <div>电话：{{getArrList.supplierPhone}}</div>
                <div>地址：{{getArrList.tenantAddress}}</div>
              </div>
            </div>
            <div
                style="height: 100%; width: 31%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;">
              <div style="font-size: 16px;">{{item.name}}</div>
              <div style="text-align: center;">
                <vue-qr :text="item.code" :margin="0" colorDark="#000" colorLight="#fff" :logoScale="1" :size="120"></vue-qr>
              </div>
              <div style="font-size: 24px; font-weight: bold;">{{item.code}}</div>
            </div>
          </div>

        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import vueQr from 'vue-qr'
  export default {
    name: 'UserEditForm',
    components: {
      vueQr
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        dialogVisible: false,
        List: [],
        //配货单id
        MaxList: '',
        //选中打印的包裹
        getArr: [],
        //包裹去取送信息
        getArrList: []
      }
    },
    watch: {
      visible(newVal) {
        this.dialogVisible = newVal;
      }
    },
    methods: {
      printBag() {
        // 打印的单个包裹的html
        const htmlInner = document.getElementById('print-area').innerHTML;
        const newWin = window.open('', '_blank', '');
        newWin.document.write(htmlInner);
        newWin.document.getElementsByTagName('body')[0].style = "margin: 0; padding: 0; font-family: '黑体';";
        newWin.print();
        this.$emit('cancel')
      },
      getData(item) {
        this.List = item.distributionParcelDTOList
        this.MaxList = item.id
        for (let i = 0; i < this.List.length; i++) {
          this.List[i].status = 1
        }
      },
      clickLi(index) {
        console.log(index);
        let self = this
        if (self.List[index].status === 1) {
          let arr = self.List[index]
          arr.status = 2
          self.$set(self.List, index, arr)
        } else {
          let arr = self.List[index]
          arr.status = 1
          self.$set(self.List, index, arr)
        }
        this.initPrintList();
      },
      allStatus(item) {
        if (item === 1) {
          for (let i = 0; i < this.List.length; i++) {
            let arr = this.List[i]
            arr.status = 1
            this.$set(this.List, i, arr)
            // this.List[i].status = 1
          }
        } else {
          for (let i = 0; i < this.List.length; i++) {
            let arr = this.List[i]
            arr.status = 2
            this.$set(this.List, i, arr)
            // this.List[i].status = 2
          }
        }
        this.initPrintList();
      },
      initPrintList() {
        this.getArr = []
        for (var i = 0; i < this.List.length; i++) {
          if (this.List[i].status === 2) {
            this.getArr.push(this.List[i])
          }
        }
      },
      handleCancel() {
        this.$emit('cancel')
      },
      handleCanOk() {
        if (this.getArr.length === 0) {
          this.$message.error('请选选择要打印的包裹！');
          return
        }
        this.$store.dispatch('request', this.$api.sellerCenter.printDeliveryList(this.MaxList)).then(res => {
          this.getArrList = res.result;
          let timer = setTimeout(() => {
            this.printBag();
            clearTimeout(timer);
          }, 1000);
        })
      }
    },
  }
</script>
<style lang="less" scoped>
  .modal-conetnt {
    overflow: hidden;

    > div {
      float: left;
      width: 156px;
      height: 62px;
      margin-bottom: 16px;
      margin-right: 16px;
      border: 1px solid @newBorder;
      border-radius: 2px;
      box-shadow: 0px 0px 4px 0px rgba(39, 36, 36, 0.1);
      padding: 8px 16px;
      position: relative;

      .xuanzhong {
        width: 22px;
        height: 22px;
        position: absolute;
        bottom: 0;
        right: -1px;
      }

      p {
        font-size: 12px;
        color: @newColorGreyFont;
        margin-bottom: 8px;
        height: 16px;
        line-height: 16px;

        img {
          float: right;
          width: 16px;
          height: 16px;
        }
      }

      > div {
        font-size: 16px;
        height: 22px;
        line-height: 22px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: @newColorGreyFontM;
      }
    }

    > div:nth-child(4n) {
      margin-right: 0;
    }

    .is-active {
      border: 1px solid @activeRed;
    }

    .is-active > div {
      color: @activeRed !important;
    }
  }

  /deep/ .ant-modal-footer {
    padding: 16px;
    height: 64px;

    span {
      float: left;
      font-size: 12px;
      color: @activeRed;
      height: 32px;
      line-height: 32px;

      i {
        font-style: normal;
        cursor: pointer;
      }
    }
  }

  /deep/ .ant-btn {
    color: @newColorGreyFontM;
    line-height: 30px;

    span {
      color: @newColorGreyFontM;
    }
  }

  /deep/ .ant-btn-primary {
    line-height: 30px;

    span {
      color: #fff;
    }
  }

  .print-area {
    display: none;
  }
</style>
